<template>
  <div class="tag-overview">
    <el-row>
      <el-col :span="15" class="left-side">
        <section>
          <div class="detail-top">
            <span class="top-icon tag-story"><icon-svg name="iconBase"></icon-svg></span>标签故事
          </div>
          <div class="detail-content">
            <el-input
              v-model="info.tagStory"
              type="textarea"
              disabled
              autosize
              resize="none"
              v-if="info.tagStory"
            ></el-input>
            <template v-else>
              暂无
            </template>
          </div>
        </section>
        <section>
          <div class="detail-top">
            <span class="top-icon tag-biz"><icon-svg name="iconBiz"></icon-svg></span>业务口径
          </div>
          <div class="detail-content">
            <el-input
              v-model="info.bizStmt"
              type="textarea"
              disabled
              autosize
              resize="none"
              v-if="info.bizStmt"
            ></el-input>
            <template v-else>
              暂无
            </template>
          </div>
        </section>
        <section>
          <div class="detail-top">
            <span class="top-icon tag-tech"><icon-svg name="iconTech"></icon-svg></span>技术口径
          </div>
          <div class="detail-content">
            <el-input
              v-model="info.itStmt"
              type="textarea"
              disabled
              autosize
              resize="none"
              v-if="info.itStmt"
            ></el-input>
            <template v-else>
              暂无
            </template>
          </div>
        </section>
        <section class="tag-system">
          <div class="detail-top">
            <span class="top-icon"><icon-svg name="iconSystem"></icon-svg></span>所属标签体系
          </div>
          <div class="detail-content">
            <ul v-if="belongCatalogList.length">
              <li v-for="(item, index) in belongCatalogList" :key="index">{{ item }}</li>
            </ul>
            <template v-else>
              暂无
            </template>
          </div>
        </section>
        <section>
          <div class="detail-top">
            <span class="top-icon tag-personal"><icon-svg name="iconPersonal"></icon-svg></span>个人备注
          </div>
          <div class="detail-content">
            <tag-addition :assetId="assetId" :tagStatus="info.tagStatus"></tag-addition>
          </div>
        </section>
        <section class="tag-enum">
          <div class="detail-top">
            <span class="top-icon"><icon-svg name="iconEnum"></icon-svg></span>枚举值
          </div>
          <div class="detail-content">
            <ul class="tag-scrollbar" v-if="info.enumTag === 1 && info.enumVals.length">
              <li v-for="item in info.enumVals.slice(0, 10)" :key="item.cdVal">
                <el-row :gutter="20">
                  <el-col :span="8">枚举值：{{ item.cdVal }}</el-col>
                  <el-col :span="16">描述：{{ item.cdDesc }}</el-col>
                </el-row>
              </li>
              <li class="more" v-if="info.enumVals.length > 10">
                <span class="tag-click-item" @click="showEnmus">查看更多</span>
              </li>
            </ul>
            <template v-else>
              暂无
            </template>
          </div>
        </section>
        <section class="tag-params">
          <div class="detail-top">
            <span class="top-icon"><icon-svg name="iconDevelop"></icon-svg></span>参数
          </div>
          <div class="detail-content">
            <ul class="tag-scrollbar" v-if="info.haveParam === 1 && info.tagparams.length">
              <li v-for="(item, index) in info.tagparams" :key="index">
                <el-row :gutter="20">
                  <el-col :span="6">名称：{{ item.paramNm }}</el-col>
                  <el-col :span="6">类型：{{ $dict('value_type')[item.paramType] }}</el-col>
                  <el-col :span="6">字段：{{ item.fieldNm }}</el-col>
                  <el-col :span="6" v-if="item.optParamVal.length">参数值：{{ item.optParamVal }}</el-col>
                </el-row>
              </li>
            </ul>
            <template v-else>
              暂无
            </template>
          </div>
        </section>
        <section>
          <div class="detail-top">
            <span class="top-icon tag-tech"><icon-svg name="iconShareSQL"></icon-svg></span>数据同步
          </div>
          <div class="detail-content">
            <ul class="sync-records tag-scrollbar clearfix" v-if="info.syncRecords.length">
              <li v-for="(item, index) in info.syncRecords" :key="index">
                <p><span>平台：</span>{{ item.syncPlfmNm }}</p>
                <p><span>数据库：</span>{{ item.syncDbNm }}</p>
                <p><span>数据表：</span>{{ item.syncTableNm }}</p>
                <p><span>字段：</span>{{ item.syncFieldNm }}</p>
              </li>
            </ul>
            <template v-else>
              暂无
            </template>
          </div>
        </section>
      </el-col>
      <el-col :span="9" class="right-side">
        <section>
          <div class="detail-top">
            <span class="top-icon tag-base"><icon-svg name="iconBase"></icon-svg></span>基本信息
          </div>
          <div class="detail-content">
            <p>标签类别：{{ info.tagKind }}</p>
            <p>统计粒度：{{ info.hqTag }}</p>
            <p v-if="info.tagKindId !== 4 && info.tagKindId !== 5">取值类型：{{ info.valueType }}</p>
            <p>客户统计范围：{{ info.clientStatRange }}</p>
            <p>
              上线平台：<span v-for="(item, index) in info.appPlfms" :key="index">【{{ item }}】</span>
            </p>
            <p>平台数据日期：{{ info.plfmDataDate || '暂无' }}</p>
            <p>上线时间：{{ info.actRolloutDt.indexOf('2999') >= 0 ? '未知' : info.actRolloutDt }}</p>
          </div>
        </section>
        <section>
          <div class="detail-top">
            <span class="top-icon tag-response"><icon-svg name="iconResponse"></icon-svg></span>责任方
          </div>
          <div class="detail-content">
            <p>责任团队：{{ info.respTeamNm }}</p>
            <p>责任人：{{ info.responserNm ? $name(info, 'responserNnm', 'responserNm') : '暂无' }}</p>
            <p>开发团队：{{ info.develTeamNm }}</p>
            <p>开发负责人：{{ $name(info, 'developerNnm', 'developerNm') }}</p>
            <p>提出人：{{ $name(info, 'requirerNnm', 'requirerNm') }}</p>
          </div>
        </section>
        <section>
          <div class="detail-top">
            <span class="top-icon tag-table"><icon-svg name="iconTable"></icon-svg></span>来源表信息
          </div>
          <div class="detail-content">
            <p>归属平台：{{ info.plfm }}</p>
            <p>归属数据库：{{ info.db }}</p>
            <p>归属表名：{{ info.table }}</p>
            <p v-if="info.tagKindId !== 5">{{ info.tagKindId === 4 ? '事件ID' : '归属字段' }}：{{ info.field }}</p>
            <p>关联字段：{{ info.relaFields.join(',') }}</p>
            <p>是否有参数：{{ info.haveParam ? '是' : '否' }}</p>
            <p>标签编码：{{ info.tagCode }}</p>
          </div>
        </section>
        <section>
          <div class="detail-top">
            <span class="top-icon"><icon-svg name="iconMessage"></icon-svg></span>评价信息
          </div>
          <div class="detail-content">
            <p>评价人次：{{ evaluation.userCnt }}次</p>
            <p>信息准确性：<el-rate v-model="evaluation.infoAcrc" disabled show-score></el-rate></p>
            <p>数据准确性：<el-rate v-model="evaluation.dataAcrc" disabled show-score></el-rate></p>
            <p>数据时效性：<el-rate v-model="evaluation.dataTmln" disabled show-score></el-rate></p>
          </div>
        </section>
        <section>
          <div class="detail-top">
            <span class="top-icon tag-user"><icon-svg name="iconCrown"></icon-svg></span>热门用户
          </div>
          <div class="detail-content">
            <template v-if="hotUsers.length">
              <p v-for="(item, index) in hotUsers" :key="item.userId">
                <tag-user :user="item" :index="index"></tag-user>
              </p>
            </template>
            <p v-else>暂无热门用户</p>
          </div>
        </section>
        <section>
          <div class="detail-top">
            <span class="top-icon"><icon-svg name="iconTag"></icon-svg></span>相似标签
          </div>
          <div class="detail-content tag-table">
            <template v-if="similar.length">
              <p v-for="item in similar" :key="item.assetId" class="similar">
                <icon-svg name="iconTag"></icon-svg>
                <span class="click-item" @click="goSimilar(item)">{{ item.assetNm }}</span>
              </p>
            </template>
            <p v-else>暂无相似标签</p>
          </div>
        </section>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import tagAddition from '@/components/tag-addition'
export default {
  components: {
    tagAddition
  },
  props: {
    assetId: {
      type: [String, Number],
      required: true,
      default: ''
    }
  },
  data() {
    return {
      info: {
        plfmDataDate: '',
        tagStory: '',
        bizStmt: '',
        itStmt: '',
        tagKind: '',
        tagKindId: '',
        valueType: '',
        hqTag: '',
        actRolloutDt: '',
        clientStatRange: '',
        appPlfms: [],
        enumTag: '',
        enumVals: [],
        syncRecords: [],
        respTeamNm: '',
        responserNm: '',
        responserNnm: '',
        develTeamNm: '',
        developerNm: '',
        developerNnm: '',
        requirerNm: '',
        requirerNnm: '',
        plfm: '',
        db: '',
        table: '',
        field: '',
        relaFields: [],
        haveParam: '',
        tagparams: [],
        tagCode: '',
        tagStatus: 50
      },
      belongCatalogList: [],
      evaluation: {
        userCnt: 0,
        infoAcrc: 0,
        dataAcrc: 0,
        dataTmln: 0
      },
      hotUsers: [],
      similar: []
    }
  },
  methods: {
    getInfo(params) {
      this.info.plfmDataDate = params.astTagDataRelaDTO.plfmDataDate
      this.info.tagStory = params.astTagBaseInfoDTO.tagStory
      this.info.bizStmt = params.astTagBaseInfoDTO.bizStmt
      this.info.itStmt = params.astTagBaseInfoDTO.itStmt
      this.info.tagKind = params.astTagBaseInfoDTO.tagKind
      this.info.tagKindId = params.astTagBaseInfoDTO.tagKindId
      this.info.valueType = params.astTagDataRelaDTO.valueType
      this.info.hqTag = params.astTagBaseInfoDTO.hqTag
      this.info.actRolloutDt = params.astTagBaseInfoDTO.actRolloutDt
      this.info.clientStatRange = params.astTagBaseInfoDTO.clientStatRange
      this.info.appPlfms = []
      params.astTagBaseInfoDTO.appPlfms.forEach(v => this.info.appPlfms.push(v.appPlfmNm))
      this.info.enumTag = params.astTagDataRelaDTO.enumTag
      this.info.enumVals = params.astTagDataRelaDTO.enumVals
      this.info.syncRecords = params.astTagDataRelaDTO.syncRecords
      this.info.respTeamNm = params.astTagPrincipalRelaDTO.respTeamNm
      this.info.responserNm = params.astTagPrincipalRelaDTO.responserNm
      this.info.responserNnm = params.astTagPrincipalRelaDTO.responserNnm
      this.info.develTeamNm = params.astTagPrincipalRelaDTO.develTeamNm
      this.info.developerNm = params.astTagPrincipalRelaDTO.developerNm
      this.info.developerNnm = params.astTagPrincipalRelaDTO.developerNnm
      this.info.requirerNm = params.astTagPrincipalRelaDTO.requirerNm
      this.info.requirerNnm = params.astTagPrincipalRelaDTO.requirerNnm
      this.info.plfm = params.astTagDataRelaDTO.plfm
      this.info.db = params.astTagDataRelaDTO.db
      this.info.table = params.astTagDataRelaDTO.table
      this.info.field = params.astTagDataRelaDTO.field
      this.info.relaFields = params.astTagDataRelaDTO.relaFields
      this.info.haveParam = params.astTagDataRelaDTO.haveParam
      this.info.tagparams = params.astTagDataRelaDTO.params || []
      this.info.tagCode = params.astTagDataRelaDTO.tagCode
      this.info.tagStatus = params.astTagBaseInfoDTO.tagStatusId
      this.belongCatalogList = params.belongCatalogList
      this.evaluation.userCnt = params.assetAvgCmnt.userCnt
      this.evaluation.infoAcrc = params.assetAvgCmnt.infoAcrc
      this.evaluation.dataAcrc = params.assetAvgCmnt.dataAcrc
      this.evaluation.dataTmln = params.assetAvgCmnt.dataTmln
      this.hotUsers = params.hotUsers
      this.similar = params.simAssetList
    },
    goSimilar(item) {
      this.$blank('market-tag', { params: { id: item.assetId } })
    },
    showEnmus() {
      this.$emit('showEnums')
    }
  }
}
</script>

<style lang="scss">
.tag-overview {
  .detail-top {
    .tag-story {
      background-color: #74cbc5;
    }
    .tag-biz {
      background-color: #87c1f1;
    }
    .tag-tech {
      background-color: #f7daa0;
    }
    .tag-personal {
      background-color: #8893cb;
    }
  }
  .tag-system {
    .detail-top .top-icon {
      background-color: #ffad9b;
    }
    li {
      padding: 5px 0;
    }
  }
  .tag-enum {
    .detail-top .top-icon {
      background-color: #e8a0b8;
      svg {
        width: 25px;
        height: 25px;
      }
    }
  }
  .tag-params {
    .detail-top .top-icon {
      background-color: #a0d1e8;
      svg {
        width: 20px;
        height: 20px;
      }
    }
  }
  .tag-enum,
  .tag-params {
    ul {
      max-height: 160px;
      overflow-y: auto;
    }
    li {
      padding: 0 30px 10px 30px;
      position: relative;
      &:not(.more):before {
        width: 5px;
        height: 5px;
        content: '';
        background-color: #eab39a;
        border-radius: 50%;
        position: absolute;
        top: 5px;
        left: 10px;
      }
      &.more {
        text-align: right;
      }
    }
  }
  .sync-records {
    li {
      width: 42%;
      float: left;
      border: 1px solid $border-color;
      padding: 10px;
      margin-bottom: 10px;
      &:nth-of-type(2n) {
        margin-left: 4%;
      }
      &:nth-of-type(2n + 1) {
        margin-right: 4%;
      }
      p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        span {
          font-weight: bold;
        }
      }
    }
  }
  .right-side .detail-top {
    .tag-base,
    .tag-response,
    .tag-table {
      svg {
        width: 18px;
        height: 18px;
      }
    }
    .tag-user svg {
      width: 28px;
      height: 28px;
    }
  }
  .similar {
    svg {
      color: $theme-color;
      margin-right: 10px;
    }
  }
  .el-textarea.is-disabled .el-textarea__inner {
    color: #000;
    background-color: #fff;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: default;
  }
}
</style>
